<template>
  <div class="app-container">
    <el-card shadow="never" class="mb20">
      <div class="filter-container">
        <el-row>
          <el-col :span="20">
            <div class="filter-item">
              <label class="radio-label">表单ID：</label>
              <el-input v-model="listQuery.tableId" clearable placeholder="表单ID" style="width: 280px;" @keyup.enter.native="handleFilter" @clear="handleFilter" />
            </div>
            <div class="filter-item">
              <label class="radio-label">表单名称：</label>
              <el-input v-model="listQuery.tableComment" clearable placeholder="表单名称" style="width: 200px;" @keyup.enter.native="handleFilter" @clear="handleFilter" />
            </div>
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter"></el-button>
            <el-button class="filter-item" icon="el-icon-refresh-left" @click="handleReset"></el-button>
          </el-col>
          <el-col :span="4" style="text-align: right;">
            <el-button class="filter-item" type="primary" icon="el-icon-plus" title="新建表单定义" @click="handleAdd"></el-button>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-table
          ref="tabTable"
          :data="list"
          element-loading-text="Loading"
          row-key="tableId"
          border
          stripe
          fit
          v-loading="listLoading"
          highlight-current-row
          :tree-props="{children: 'childList'}"
          @current-change="handleCurrentChange">
          <el-table-column prop="tableName" label="表名" min-width="150" header-align="center" align="left"></el-table-column>
          <el-table-column prop="tableComment" label="表单名称" min-width="200" align="center">
          </el-table-column>
          <el-table-column prop="tableDef" label="表定义" width="80" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.tableDef | tableDefFilter }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNo" :limit.sync="listQuery.pageSize" @pagination="fetchData" />
      </el-col>
      <el-col :span="12">
        <el-card>
          <el-card shadow="never" class="mb20">
            <el-row>
              <el-col :span="8">
              <label class="radio-label">布局列表</label>
              </el-col>
              <el-col :span="16" style="text-align: right;">
                <el-button class="filter-item" type="primary" size="small" icon="el-icon-plus" title="新建表单布局" @click="handleCreateForm"></el-button>
              </el-col>
            </el-row>
          </el-card>
          <el-table
            v-loading="layoutListLoading"
            :data="layoutList"
            element-loading-text="Loading"
            border
            stripe
            fit
            highlight-current-row>
            <el-table-column prop="layoutName" label="名称" min-width="150" align="center"></el-table-column>
            <el-table-column prop="layoutType" label="类型" width="100" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.layoutType | layoutTypeFilter }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="140" align="center">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" circle icon="el-icon-edit" title="编辑" @click="handleEdit(scope.row)"></el-button>
                <el-button type="primary" size="mini" circle icon="el-icon-copy-document" title="复制" @click="handleCopy(scope.row)"></el-button>
                <el-button type="danger" size="mini" circle icon="el-icon-delete" title="删除" @click="handleRemove(scope.row)"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog :visible.sync="dialogVisible" width="400px" :title="title">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="复制布局名称：">
          {{layoutRow.layoutName}}
        </el-form-item>
        <el-form-item prop="layoutName" label="新布局名称：">
          <el-input v-model="form.layoutName" placeholder="请输入新布局名称"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="dialogBtnLoading" @click="handleCopySubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getPageList } from '@/api/workflow/form/table'
import { getListByTableId, create, remove } from '@/api/workflow/form/layout'
import Pagination from '@/views/workflow/components/Pagination'
import enums from '@/views/workflow/utils/enum'
export default {
  filters: {
    tableDefFilter(type) {
      return enums.TAB_DEF[type]
    },
    layoutTypeFilter(type) {
      return enums.LAYOUT_TYPE[type]
    }
  },
  components: { Pagination },
  data() {
    return {
      total: 0,
      listQuery: {
        tableId: '',
        tableComment: '',
        pageNo: 1,
        pageSize: 10
      },
      list: [],
      currentTabRow: {},
      listLoading: true,
      layoutList: null,
      layoutListLoading: false,
      dialogVisible: false,
      title: '复制表单布局',
      dialogBtnLoading: false,
      layoutRow: {},
      form: {
        layoutName: ''
      },
      rules: {
        layoutName: { required: true, message: '请输入布局名称', trigger: 'blur' }
      }
    }
  },
  created() {
    this.listQuery.tableId = this.$route.params.tableId
    this.fetchData()
  },
  methods: {
    handleFilter() {
      this.listQuery.pageNo = 1
      this.fetchData()
    },
    handleReset() {
      this.listQuery.tableId = ''
      this.listQuery.tableComment = ''
      this.handleFilter()
    },
    fetchData() { // 获取表单列表
      this.listLoading = true
      getPageList(this.listQuery).then(response => {
        this.total = response.data.total
        this.list = response.data.rows
        if (this.list && this.list.length) {
          this.$refs.tabTable.setCurrentRow(this.list[0])
        }
        this.listLoading = false
      })
    },
    handleCurrentChange(row) {
      this.currentTabRow = row
      this.fetchLayoutData()
    },
    fetchLayoutData() { // 查询表单下面的布局列表
      if (this.currentTabRow && this.currentTabRow.tableId) {
        this.layoutListLoading = true
        getListByTableId(this.currentTabRow.tableId).then(res => {
          this.layoutList = res.data
          this.layoutListLoading = false
        })
      }
    },
    handleAdd() { // 新增表单定义
      this.$router.push({ path: '/workflow/form/create' })
    },
    handleCreateForm() { // 新增表单布局
      if (this.currentTabRow.parentId) {
        this.$message.warning('只能对主表添加布局')
        return
      }
      if (!this.currentTabRow.tableId) {
        this.$message.warning('请先选择需要添加布局的表单')
        return
      }
      this.$router.push({ 
        path: '/workflow/form/design', 
        query: { 
          tableId: this.currentTabRow.tableId, 
          tableComment: this.currentTabRow.tableComment 
        }
      })
    },
    // handleCreateTable() { // 新增表格布局
    //   // this.$router.push({ path: '/generator', query: { tableId: '' }})
    // },
    handleEdit(row) { // 编辑表单布局/表格布局
      this.$router.push({ 
        path: '/workflow/form/design', 
        query: { 
          tableId: 
          row.tableId, 
          tableComment: this.currentTabRow.tableComment, 
          layoutId: row.layoutId 
        }
      })
    },
    handleCopy(row) { // 复制表单布局/表格布局
      this.layoutRow = row
      this.title = row.type === 'FORM' ? '复制表单布局' : '复制表格布局'
      this.dialogVisible = true
    },
    handleCopySubmit() { // 提交复制
      if (!this.layoutRow || !this.layoutRow.layoutId) {
        this.$message.warning('找不到可复制的布局')
        return
      }
      const post = { ...this.layoutRow, layoutName: this.form.layoutName }
      delete post.layoutId
      this.$refs.form.validate(valid => {
        if (valid) {
          this.dialogBtnLoading = true
          create(post).then(res => {
            this.dialogBtnLoading = false
            this.$message.success('复制成功')
            this.fetchLayoutData()
            this.dialogVisible = false
          }).catch(res => {
            this.dialogBtnLoading = false
          })
        }
      })
    },
    handleRemove(row) { // 删除表单布局/表格布局
      const _this = this
      this.$confirm({
        title: '提示',
        content: `您确定删除[${row.layoutName}]这条记录吗？`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        centered: true,
        onOk() {
          remove(row.layoutId).then(res => {
            _this.$message.success('删除成功')
            _this.fetchLayoutData()
          })
        }
      })
    }
  }
}
</script>
